<template>
  <div>
    <!-- <h3>当前最新的count值为：{{count}}</h3> -->
    <h3>{{$store.getters.showNum}}</h3>
    <button @click="buttonAdd">+1</button>
    <button @click="buttonAdd2">+N</button>
    <button @click="buttonAdd3">+1 Async</button>
    <button @click="buttonAdd4">+N Async</button>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data(){
    return{}
  },
  computed:{
    // 展开运算符
    ...mapState(['count'])
  },
  methods:{
    buttonAdd(){
      // 触发mutations的第一种方式
      // commit的作用就是调用某个mutation函数
      this.$store.commit('add')
    },
    buttonAdd2(){
      this.$store.commit('addN', 3)
    },
    // 异步的加1
    buttonAdd3(){
      // 这里的dispatch函数，专门用来触发action
      this.$store.dispatch('addAsync')
    },
    // 异步加N
    buttonAdd4(){
      this.$store.dispatch('addAsyncN', 5)
    }
  }
}
</script>